import { useUserStore } from '@/stores'
import { createRouter, createWebHistory } from 'vue-router'

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

NProgress.configure({
  showSpinner: false
})

// 如何得到路由实例 createRouter()
// 如何设置路由模式 history
// history 模式 createWebHistory()
// hash 模式 createWebHashHistory()
const router = createRouter({
  // history: createWebHistory(import.meta.env.BASE_URL),
  // 默认参数 '/' 路由的基础路由
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/login',
      component: () => import('@/views/Login/index.vue'),
      meta: { title: '登录' }
    },
    {
      path: '/agreement',
      component: () => import('@/views/Login/agreement.vue'),
      meta: { title: '用户协议及隐私条款' }
    },
    {
      path: '/home/detail',
      component: () => import('@/views/Home/components/Detail.vue'),
      meta: { title: '详情' }
    },
    {
      path: '/home/confirmOrder',
      component: () => import('@/views/Order/confirmOrder.vue'),
      meta: { title: '确认订单' }
    },
    {
      path: '/article/activityDetail',
      component: () => import('@/views/Article/ActivityDetail.vue'),
      meta: { title: '活动详情' }
    },
    {
      path: '/user/coupon',
      component: () => import('@/views/User/Coupon.vue'),
      meta: { title: '活动详情' }
    },
    {
      path: '/user/collection',
      component: () => import('@/views/User/Collection.vue'),
      meta: { title: '我的收藏' }
    },
    {
      path: '/user/info',
      component: () => import('@/views/User/Info.vue'),
      meta: { title: '个人信息' }
    },
    {
      path: '/user/merchantUpload',
      component: () => import('@/views/User/MerchantUpload.vue'),
      meta: { title: '商户信息上传' }
    },
    {
      path: '/notify/orderDetail',
      component: () => import('@/views/Notify/orderDetail.vue'),
      meta: { title: '订单详情' }
    },
    {
      path: '/paysuccess',
      component: () => import('@/views/Notify/components/paysuccess.vue'),
      meta: { title: '支付成功' }
    },
    {
      path: '/payfail',
      component: () => import('@/views/Notify/components/payfail.vue'),
      meta: { title: '支付失败' }
    },
    {
      path: '/orderPay',
      component: () => import('@/views/Order/OrderPay.vue'),
      meta: { title: '预支付' }
    },
    {
      path: '/',
      redirect: '/home',
      component: () => import('@/views/Layout/index.vue'),
      children: [
        {
          path: '/home',
          component: () => import('@/views/Home/index.vue'),
          meta: { title: '首页' }
        },
        {
          path: '/article',
          component: () => import('@/views/Article/index.vue'),
          meta: { title: '活动' }
        },
        {
          path: '/notify',
          component: () => import('@/views/Notify/index.vue'),
          meta: { title: '订单' }
        },
        {
          path: '/user',
          component: () => import('@/views/User/index.vue'),
          meta: { title: '个人中心' }
        }
      ]
    }
  ]
})

// 全局的前置导航守卫
router.beforeEach((to) => {
  NProgress.start()
  // 获取 token 的
  const store = useUserStore()
  // 白名单
  const wihteList = ['/login', '/agreement']
  // 如果你没有token并且不在白名单里面，重定向到登录
  if (!store.user?.token && !wihteList.includes(to.path)) return '/login'
})

// 全局的后置导航
router.afterEach((to) => {
  document.title = `${to.meta.title || ''}-${import.meta.env.VITE_APP_TITLE}`
  NProgress.done()
})

export default router
